<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本书写方向</title>
    <style>
        html {
            font-size: 12px;
        }
        .writing {
            width: 800px;
            margin: 0 auto;
            height: 200px;
            background-color: antiquewhite;
            /* writing-mode 设置文本的书写方式
                horizontal-tb：横向
                vertical-rl: 纵向 从右r往左l
                vertical-lr: 纵向 从左l往右r
            */
            writing-mode: vertical-rl;
            font-size: 14px;
        }

        /* 0.8 * 16 12.8 */
        /* em 相对于父元素的倍数 */
        /* rem 相对于根节点[html]元素的倍数 */

        .span {
            font-size: 1em;
        }

        .span1 {
            font-size: 1rem;
        }


    </style>
</head>

<body>
    对比：
    <div class="writing">
        白日依山尽，黄河入海流。
        <span class="span">欲穷千里目</span>
        <span class="span1">更上一层楼</span>
    </div>
</body>

</html>